<template>
	<view>
		<view
			v-for="(data,i) in list"
			:key="data.id"
			class='p-3-1 border-b b-active-op20 row-center'
			:class="[i === 0 ? 'border-t' : '']"
			hover-class="bg-primary-op20"
			hover-start-time="0"
			hover-stay-time="50"
		>
			<view class="flex-1">
				<view class="row-center mb-2-2">
					<text class="text-n color-main block">卡号: {{ data.cardNo }}</text>
					<view class="flex-1" />
					<text class="text-n color-main block">{{ getStatusText(data.status) }}</text>
				</view>
				<view class="row-center">
					<text class="text-n color-main block">面额: ¥{{ data.denomination }}</text>
					<view class="flex-1" />
					<text class="text-n color-main block">余额: ¥{{ data.balance }}</text>
				</view>
			</view>
		</view>
		<c-empty v-if="!loading && list.length === 0"></c-empty>
	</view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getStoredList } from "@/base/api/member.js";

const list = ref([]);

function getStatusText(status){
	const arr = ['未关联','正常','冻结'];
	return arr[status];
}

const loading = ref(true);
onMounted(async () => {
	loading.value = true;
	const data = await getStoredList();
	loading.value = false;
	if(data) {
		list.value = data;
	}
});
</script>

<style>
</style>
